<template>
    <div class="sidebar-left" style="width:150px;padding-top:20px;">
        <div>
        <el-menu :active="onRoutes" class="el-menu-vertical-demo" theme="dark"  router>
            <template v-for="item in items">
                <template>
                    <el-menu-item :index="item.index" :class="route==item.index?'is-sub-active':''" :key='item.index' style='color:#000 !important;'>
                    {{ item.title }}
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
    </div>
</template>

<script>
    import MENU from  '../../service/auth'
    export default {

        data() {
            return {
                items:[],
                route:""
            }
        },
        computed:{

            onRoutes(){
                   this.setMenu()
                   this.route= this.$route.path
                   return this.$route.path
            }
        },
        mounted(){

          this.setMenu()
        
        },
        methods:{
            getSubMenu(){
                
                 let menu=MENU()
                  let path=this.$route.path
                 for(let index in menu){
                    if(menu[index].subs){
                        for(var i_sub in menu[index].subs){
                            // //console.log(path)
                            // //console.log(menu[index].subs[i_sub].index)
                            if(path==menu[index].subs[i_sub].index){
                              return menu[index].subs
                            }
                        }
                    }
          }
                return []
        },
        setMenu(){
               this.items=this.getSubMenu()
        }
            
        }
    }
</script>

<style scoped>
    .sidebar{

        display: block;
        position: absolute;
        width: 100%;
        left: 0;
        top: 70px;
        background: #fff;
        border-bottom:1px solid #ddd;
       
    }
    .sidebar > ul {
        height:100%;
    }
    .sidebar li{
        float: left;
    }
    .is-active{
        background: #fff;
    }
    .is-sub-active{
        background: #ECF4FC;
    }
</style>
